<template>
  <div id="left-center"></div>
</template>
<script setup lang="ts">
import { city } from "../const";
import { markRaw, onMounted, ref } from "vue";
//@ts-ignore
import { totalApi } from "@/api/dataScreen/index.js";
//@ts-ignore
import echarts from "@/hooks/useEcharts";
import { ElMessage } from "element-plus";

const colors = ["#5AAEF3", "#FB6E6C"];
const myChart = ref();
const echartData = ref();
let totalAmount;
onMounted(async () => {
  // var chartDom = document.getElementById('left-center')
  // let mychart = markRaw(echarts.init(chartDom))
  // myChart.value = mychart
  // window.addEventListener('resize', function () {
  //   myChart.value.resize()
  // })
  // const params = {
  //   area: '',
  //   date: '',
  // }
  // const [err, res] = await getDesignCompletionRate(params)
  // console.log('res计划完成率', res)
  // echartData.value = res.data
  getData();
});
const initEchats = async () => {
  var chartDom = document.getElementById("left-center");
  var myChart = echarts.init(chartDom);
  var option;
  option = {
    color: colors,
    tooltip: {
      trigger: "item",
    },
    legend: {
      orient: "horizontal",
      // top: 12,
      icon: "circle",
      // l: 0,
      itemHeight: 8,
      itemWidth: 8,
    },
    textStyle: {
      fontSize: 10,
    },
    series: [
      {
        type: "pie",
        radius: "50%",
        center: ["49%", "50%"],
        avoidLabelOverlap: false,
        // itemStyle: {
        //   // borderRadius: 10,
        //   borderColor: "#fff",
        //   borderWidth: 2,
        // },
        // formatter: "{a} <br\/>{b} : {c}%",
        label: {
          formatter: "{b} \n{d}%({c})",
          // formatter: "{b} \n{d}%",
        },
        // normal: {
        //   label: {
        //     show: true,
        //     fontSize: 10,
        //   },
        // },

        labelLine: {
          show: true,
          normal: {
            length: 6, //第一条线
            length2: 12, //第二条线
          },
        },
        data: echartData.value.map((item, index) => {
          item.label = {
            color: colors[index],
          };
          return item;
        }),
      },
    ],
  };

  option && myChart.setOption(option);
  window.addEventListener("resize", function () {
    myChart.resize();
  });
};
async function getData() {
  const response = await totalApi();

  if (response.code === 200) {
    echartData.value = response.data.map((item) => ({
      name: item.name,
      value: item.value,
    }));


    // 计算总金额
    totalAmount = response.data.reduce(function (acc, item) {
      return acc + item.value;
    }, 0);
  } else {
    ElMessage.error(response.msg);
  }

  initEchats();
}

defineExpose({ initEchats });
</script>
<style scoped lang="scss">
.left-center {
  width: 100%;
}
</style>
